<template>
	<div class="activity-part-main">
		<img src="" class="banner-img"/>
		<div class="navbar clear">
			<div class="nav-wrap fl">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item,index) in classifyList" @click="navToggle(index,item.categoryID,item.categoryName)" :class="{active : (navType == index)}" :data-id="item.categoryID">{{item.categoryName}}</div>
					</div>
				</div>
			</div>
			<img src="../assets/image/ico_leave-down@2x.png" @click="navFlag = !navFlag" class="arrow-down fr"/>
		</div>
		<div class="navList-wrap" v-show="navFlag">
			<div class="navList">
				<div class="all-cla clear"><span class="fl">全部分类</span><img src="../assets/image/ico_leave_up@2x.png" @click="navFlag = !navFlag" class="arrow-up fr"/></div>
				<ul class="cla-list clear">
					<li class="fl" v-for="(item,index) in classifyList" @click="navToggle(index,item.categoryID,item.categoryName)" :class="{active : (navType == index)}" :data-id="item.categoryID">{{item.categoryName}}</li>
				</ul>
			</div>
		</div>
		<div class="productbar">
			<div class="cla-part">
				<header>
					<div class="title-ch clear"><span class="fl"></span><p class="fl">{{categoryName}}</p><span class="fl"></span></div>
					<!--<p class="title-en">POPULAR SELECTION</p>-->
				</header>
				<div class="productList clear">
					<div class="product-item fl" v-for="item in productContent.rows">
						<router-link :to="{name: 'commodityDetail', query: {spu: item.spu}}">
							<img :src="item.imageUrl" class="product-img"/>
							<p class="product-name">{{item.goodsName}}</p>
							<p class="product-price">￥{{item.shopPrice}}</p>
						</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
import '../assets/css/swiper.min.css';
require('../assets/js/swiper.min');

export default {
	data () {return {
		navFlag:false,
		classifyList:[],
		navType:'',
		categoryID:'',
		productContent:{},
		categoryName:''
	}},
	name: 'app',
	mounted:function () {
		this.$nextTick(function () {
			this.classifyListView();
		});
		var swiper = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			freeMode: true
		});

	},
	methods:{
		classifyListView:function () {
			var _this = this;
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/activity/category/"+this.$route.query.subjectID).then(function (res) {
					_this.classifyList = res.body.content;
					_this.categoryID = _this.classifyList[0].categoryID;
					_this.categoryName = _this.classifyList[0].categoryName;
					_this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/activity/goods/"+ _this.$route.query.subjectID +"/"+ _this.categoryID + "/1").then(function (res) {
						_this.productContent = res.body.content;
				});
			});

		},
		navToggle:function (index,categoryID,categoryName) {
			this.navType = index;
			this.categoryID = categoryID;
			this.categoryName = categoryName;
			var _this = this;
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/activity/goods/" + _this.categoryID + "/1").then(function (res) {
				_this.productContent = res.body.content;
			});
		}
	}
}
</script>
<style lang="scss">
.activity-part-main{
	width:100%; height:100%;
	.banner-img{ width: 7.5rem; height: 3.3rem; position: fixed; left: 0; top:0; z-index: 20; background:#fff; }
	.navbar{
		position: fixed; left:0; top:3.3rem; height: 0.9rem; width: 100%; border-bottom:1px solid #f1f1f1; z-index: 20; background:#fff;
		.arrow-down{width: 0.3rem; height: 0.3rem; margin: 0.3rem 0.26rem 0.3rem 0;}
	}
	.nav-wrap{ width:6.9rem; height: 0.9rem; overflow-x:auto; white-space: nowrap;}
	.swiper-container {position:absolute; height: 0.9rem; padding-left: 0.2rem;}
	.swiper-slide {
		width: 1.3rem; height:0.88rem; text-align: center; font-size: 0.28rem; line-height: 0.88rem; background: #fff;
		 +.swiper-slide{margin-left: 0.48rem;}
	}
	.active{color: #ff365d; border-bottom: 0.02rem solid #ff365d;}
	.navList-wrap{
		width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; left: 0; top: 3.3rem; z-index: 20;
		.navList{
			.all-cla{
				width: 100%; height: 0.9rem; background: #f4f5f5;
				span{display: block; font-size: 0.32rem; line-height: 0.9rem; text-indent: 0.3rem; color: #333;}
				.arrow-up{width: 0.3rem; height: 0.3rem; margin: 0.3rem 0.3rem 0.3rem 0;}
			}
			.cla-list{
				width: 100%; border: 1px solid #f1f1f1; background:#fff;
				li{
					width:calc((100% - 5px)/4); height: 0.9rem; font-size: 0.28rem; line-height: 0.9rem; text-align: center; color: #333; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
				}
				.active{color: #ff365d;}
			}
		}
	}
	.productbar{width:100%; position:absolute; left:0; top:4.2rem; overflow: hidden; background:#fff;}
	.cla-part{
		header{width: 100%;}
		.title-ch{
			width:2.26rem; height:0.32rem; margin:0.46rem auto 0.14rem;
			span{width: 0.3rem; height: 0.02rem; margin: 0.15rem 0; background: #333;}
			p{width: 1.66rem; height: 0.32rem; font-size: 0.32rem; line-height: 0.32rem; text-align: center; color:#333;}
		}
		/*.title-en{ margin-bottom: 0.34rem; font-size: 0.22rem; line-height: 0.22rem; text-align: center; color: #999;}*/
		.productList{
			width:7.28rem; margin:0 auto;
			a{display: block;}
			.product-item{
				width:3.3rem; height:5.4rem; margin:0.3rem 0.15rem 0 0.15rem; border:0.02rem solid #f1f1f1;
				.product-img{width:3.3rem; height:3.3rem;}
				.product-name{margin:0.3rem 0.3rem 0.44rem 0.3rem; width:2.7rem; height:0.8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size:0.22rem; text-align:left; line-height:0.4rem; color:#3e3e3e;}
				.product-price{margin:0 0.3rem; font-size:0.24rem; font-weight:bold; text-align:left; line-height:0.24rem; color:#ff365d;}
			}
		}
	}
}
</style>